<template>
	<view class="chezhuCer">
		
		
		<block v-if="status == 0">
			<view class="agree">
				<view class="top flex-center">
					  <icon type="success" size="30" color="#4CD964"/>
					  认证已通过
				</view>
				<view class="card">
					<view class="list flex">
						<view class="label">品牌车型</view>
						<text>{{obj.model}}</text>
					</view>
					<view class="list flex">
						<view class="label">车牌号</view>
						<text>{{obj.plate_number}}</text>
					</view>
				</view>
				<view class="tip flex">
					<icon type="warn" size="14" color="orange"></icon>
					为了保护您的隐私，证件照片已隐藏
				</view>
				<view class="btns flex-between">
					<navigator open-type="navigateBack" :delta="1" class="btn flex-center">返回</navigator>
					<navigator url="/pages/self/chezhuCer" open-type="redirect" hover-class="none" class="btn flex-center">添加更多车辆</navigator>
				</view>
			</view>
		</block>
		<block v-else-if="status == 1">
			<view class="agree">
				<view class="top flex-center" style="height: 20vh;color:orange">
					  <icon type="waiting" size="30" color="orange"/>
					  平台正在审核中...
				</view>
			</view>
		</block>
		<block v-else-if="status == 2">
			<view class="agree">
				<view class="top flex-center-column" style="height: 40vh;color:red;font-size: 30rpx;">
					  <icon type="clear" size="50" color="red" style="margin-bottom: 30rpx;"/>
					   审核不通过,可以联系平台客服进行办理！
				</view>
			</view>
		</block>
		<block v-if="status == -1">
			<view class="form">
				<view class="card">
					<view class="list">
						<view class="title">驾驶证主面</view>
						<view class="upload flex-center" @click="upload('drive_face_url')">
							<image :src="drive_face_url" mode="aspectFill" class="bg" v-if="drive_face_url"></image>
							<block v-else>
								<image src="/static/drive_face.png" mode="aspectFill" class="bg"></image>
								<image src="/static/upload.png" mode="widthFix" class="cemare"></image>
							</block>
							
						</view>
					</view>
					<view class="list">
						<view class="title">驾驶证副面</view>
						<view class="upload flex-center" @click="upload('drive_back_url')">
							<image :src="drive_back_url" mode="aspectFill" class="bg" v-if="drive_back_url"></image>
							<block v-else>
								<image src="/static/drive_back.png" mode="aspectFill" class="bg"></image>
								<image src="/static/upload.png" mode="widthFix" class="cemare"></image>
							</block>
						</view>
					</view>
					<view class="list">
						<view class="title">行驶证主面</view>
						<view class="upload flex-center" @click="upload('run_face_url')">
							<image :src="run_face_url" mode="aspectFill" class="bg" v-if="run_face_url"></image>
							<block v-else>
								<image src="/static/drive_face.png" mode="aspectFill" class="bg"></image>
								<image src="/static/upload.png" mode="widthFix" class="cemare"></image>
							</block>
							
						</view>
					</view>
					<view class="list">
						<view class="title">行驶证副面</view>
						<view class="upload flex-center" @click="upload('run_back_url')">
							<image :src="run_back_url" mode="aspectFill" class="bg" v-if="run_back_url"></image>
							<block v-else>
								<image src="/static/drive_back.png" mode="aspectFill" class="bg"></image>
								<image src="/static/upload.png" mode="widthFix" class="cemare"></image>
							</block>
						</view>
					</view>
				</view>
				<button @click="submitForm">提交认证</button>
			</view>
			
			<view class="tip flex">
				点击提交认证即表示已阅读并同意小王出行
				<navigator url="" hover-class="none">《隐私条款》</navigator>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				drive_face_url:'',
				drive_back_url:'',
				run_face_url:'',
				run_back_url:'',
				status:-2,
				isSubmit:true,
				obj:{}
			};
		},
		onLoad() {
			this.getAuth()
		},
		methods:{
			getAuth(){
				this.$https.get('user').then(res=>{
					this.obj = res.car_auth;
					this.status = res.car_auth ?  res.car_auth.status : -1;
				})
			},
			upload(type){
				this.$https.upload().then(res=>{
					console.log(res)
					this[type] = res;
				})
			},
			submitForm(){
				if(!this.isSubmit) return;
				if(!this.drive_face_url){
					uni.showToast({
						title:'请上传驾驶证主面',
						icon:'none'
					})
					return
				}
				if(!this.drive_back_url){
					uni.showToast({
						title:'请上传驾驶证副面',
						icon:'none'
					})
					return
				}
				if(!this.run_face_url){
					uni.showToast({
						title:'请上传行驶证主面',
						icon:'none'
					})
					return
				}
				if(!this.run_back_url){
					uni.showToast({
						title:'请上传行驶证副面',
						icon:'none'
					})
					return
				}
				this.isSubmit = false;
				this.$https.post('user/applyCarAuth',{
					drive_face_url:this.drive_face_url,
					drive_back_url:this.drive_back_url,
					run_face_url:this.run_face_url,
					run_back_url:this.run_back_url,
				}).then(res=>{
					console.log(res)
					this.isSubmit = true;
					this.getAuth()
				})
			}
		}
	}
</script>

<style lang="less">
	page{
		background: #eee;
	}
	@color: #4CD964;
	.chezhuCer{
		padding: 24rpx;
		.form{
			.card{
				background: white;
				border-radius: 5rpx;
				padding: 15rpx 24rpx;
				.title{
					line-height: 2;
				}
				.upload{
					height: 350rpx;
					margin-bottom: 20rpx;
					position: relative;
					.bg{
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
					}
					.cemare{
						position: relative;
						z-index: 1;
						width: 100rpx;
						height: auto;
					}
				}
			}
			button{
				margin: 40rpx 0 30rpx;
				background: @color;
				color:white;
			}
		}
		
		.tip{
			font-size: 26rpx;
			color:#999;
			navigator{
				color:@color;
			}
		}
		
		.agree{
				.top{
					font-size: 45rpx;
					color:@color;
					line-height: 3;
					icon{
						margin-right: 20rpx;
					}
				}
				.card{
					background: white;
					.list{
						line-height: 3;
						font-size: 30rpx;
						padding: 0 30rpx;
						border-bottom: 1px solid #eee;
						.label{
							width: 180rpx;
							font-weight: bold;
						}
					}
				}
				.tip{
					icon{
						margin:20rpx 10rpx 20rpx 20rpx;
					}
				}
				.btns{
					padding: 30rpx;
					.btn{
						width: 48%;
						height: 80rpx;
						border-radius: 10rpx;
						
						&:first-child{
							border:1px solid #ccc;
							background: #ddd;
						}
						&:last-child{
							background: orange;
							color:#fff;
						}
					}
				}
			}
		
	}
</style>
